import React from 'react';
import { useEffect, useState} from 'react';
// 引入表格组件
import { Table, Tag,Input} from 'antd';
// 引入页头组件
import Pageheader from '../../components/pageheader';
// 引入分页组件
import Page from '../../components/page';
import { getfilmlist} from '../../api/film';
// 引入样式
import '@/assets/css/film.css';
const Film = () => {
    const columns = [
        {
            title: '序号',
            dataIndex: 'id', // 表示该列在数据中对应哪一个字段
            key: 'id', // 唯一索引
            render: (text) => <a>{text}</a>,
        },
        {
            title: '电影院',
            dataIndex: 'name',
            key: 'id',
        },
        {
            title: '所在城市',
            dataIndex: 'city_name',
            key: 'id',
        },
        {
            title: '所在区',
            dataIndex: 'district_name',
            key: 'id',
        },
        {
            title: '具体地址',
            dataIndex: 'address',
            key: 'id',
        },
        {
            title: '状态',
            key: 'id',
            dataIndex: 'status',
            render: (tags) => {
                // tags 就是该列数据对象中对应gender的value值
                return <Tag color={tags == 1 ? 'error':'success'}>
                    {tags == 1 ? '暂停营业' : '正常营业'}
                </Tag>
            }
        },
    ];
    // 设置初始页数
    const [page, setPage] = useState(1);
     // 定义电影列表数据请求
    const [filmlist, setfilmlist] = useState([])
    // 设置总的数据条数
    const [total, setTotal] = useState(0)
     // 定义请求电影列表方法
     const getfilmlistFn = (params) => {
        getfilmlist(params).then(res => {
            console.log('电影列表数据', res);
            if (res.data.errNo == 0) {
                setfilmlist(res.data.paginate.data)
                setTotal(res.data.paginate.total)
            }
        })
    }

     // 初始化请求用户列表数据
    useEffect(() => {
        getfilmlistFn({page});
    }, [page])//当page改变时重新请求数据
    const { Search } = Input;

    // 搜索功能
    const onSearch=(value)=>{
        console.log(value);
        getfilmlistFn({keyword:value,page})
    }

    return (
        <div>
        {/* 页头标签 */}
        <Pageheader title='电影列表'>
        <Search placeholder="请输入影院名" onSearch={(value)=>{onSearch(value)}} enterButton  className='search'/>
          </Pageheader>
          {/* 展示表格数据 */}
          <Table
              columns={columns}
              pagination={false}
              // 表格数据
              dataSource={filmlist}
              rowKey={(record) => record.id}
          />
           {/* 分页组件，将修改页数的方法和页数传给子组件 */}
          <Page page={page} total={total} setPage={setPage}></Page>
      </div>
    );
}

export default Film;
